<template>
  <div class="notes">
    <div class="codes" v-if="show">
      <div class="back" @click="goback">返回</div>
      <mavon-editor :toolbars="toolbars" @imgAdd="handleEditorImgAdd" @imgDel="handleEditorImgDel" style="height:100%"
        v-model="codes" @change="change" ref=md />
    </div>
    <div v-else>
      <div class="tabs">
        <div v-for="(x, y) in tabs" :key="y" :class="state.tabIndex == y ? 'active' : ''" @click="selectTab(y)">{{
          x }}
        </div>
      </div>
      <div class="files">
        <div v-for="(x, y) in files" :key="y" :class="state.fileIndex == y ? 'active' : ''"
          @click="selectFile(y)">
          {{ x.split('.')[0] }}
        </div>
      </div>
      <div @click="goback" class="goread">
        点击阅读
      </div>
    </div>
  </div>
</template>

<script>
import system from '@/utils/system';
import { onMounted, reactive, ref } from 'vue';
let notePath = 'D:/cyc_files/notes'
const codes = ref('')
const show = ref(false)
const tabs = ref([])
const files = ref([])
const state = reactive({
  tabIndex: 0,
  fileIndex: 0,
  chapterIdx: 0,
  path: '',
  files: [],
  chapters: [],
  blogInfo: {
    blogMdContent: '',
    blogContent: ''
  },
})
const toolbars = reactive({
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: true, // 标记
  superscript: true, // 上角标
  subscript: true, // 下角标
  quote: true, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: false, // code
  table: true, // 表格
  fullscreen: true, // 全屏编辑
  readmodel: true, // 沉浸式阅读
  htmlcode: true, // 展示html源码
  help: true, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  save: true, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: true, // 导航目录
  /* 2.1.8 */
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  /* 2.2.1 */
  subfield: true, // 单双栏模式
  preview: true, // 预览
})
onMounted(() => {
  // console.log(33434)
  load()
})
//监听markdown变化
function load() {
  system.readDir(notePath).then(res => {
    // console.log(res)
    tabs.value = res
    selectTab(0)
  })
}
function selectTab(y) {
  state.tabIndex = y
  const path = notePath + '/' + tabs.value[y]
  system.readDir(path).then(res => {
    // files.value = res
    files.value = res.filter(x => x.search(".md") != -1)
  })
}
function selectFile(y) {
  state.fileIndex = y
  const path = notePath + '/' + tabs.value[state.tabIndex] + '/' + files.value[state.fileIndex]
  system.readFile(path).then(res => {
    codes.value = res
    // state.show = true
    // state.getChapters(res)
  })
}
function change(value, render) {
  state.html = render;
  state.blogInfo.blogMdContent = value;
  state.blogInfo.blogContent = render;
}
//上传图片接口pos 表示第几个图片
function handleEditorImgAdd(pos, $file) {
  var formdata = new FormData();
  formdata.append('file', $file);
  state.$axios
    .post("http://localhost:8000/blogs/image/upload/", formdata)
    .then(res => {
      var url = res.data.data;
      state.$refs.md.$img2Url(pos, url);
      //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
    });
}
function handleEditorImgDel() {
  // console.log('handleEditorImgDel');
  //我这里没做什么操作，后续我要写上接口，从七牛云CDN删除相应的图片
}
function goback() {
  show.value = !show.value
}
function getChapters(codes) {
  const reg1 = /# (\S*)\s+/g
  let list = []
  let arr = codes.split(reg1)
  arr.map((x, y) => {
    if (y % 2 == 0) {
      list.push(x)
    }
  })
  // console.log(list)
  return list.slice(1)
  // const reg2  = /## (\S*)\n\s+/g
  // const reg3  = /### (\S*)\n\s+/g

}
</script>
<style lang="scss" scoped>
$color_1: #fff;
$color_2: #f00;
$color_3: #000;
$background_color_1: #fff;
$background_color_2: #ffe87f;
$background_color_3: rgba(0, 0, 0, 0.5);
$background_color_4: #f0f0f0;

.tabs {
  width: calc(100% - 100px);
  overflow: auto;
  padding: 20px 50px;

  div {
    float: left;
    width: 100px;
    height: 78px;
    padding: 20px 4px;
    margin: 10px 30px;
    background-color: $background_color_1;
    cursor: pointer;
    user-select: none;
    text-align: center;
    border: 1px solid #dfdfdf;
  }

  .active {
    width: 92px;
    height: 80px;
    padding: 20px 4px;
    color: $color_1;
    font-size: 30px;
    font-weight: 700;
    box-shadow: 0 10px 10px #dfdfdf;
    background-image: linear-gradient(to right bottom, #5315ff, #e6c0ff);
    border: 0;
  }
}

.files {
  width: calc(100% - 100px);
  padding: 20px 50px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;

  div {
    width: 110px;
    padding: 5px;
    height: 40px;
    line-height: 40px;
    margin: 10px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    background-color: $background_color_2;
  }

  .active {
    color: $color_2;
  }
}

.goread {
  width: 100px;
  height: 40px;
  border-radius: 20px;
  color: #fff;
  background-image: linear-gradient(to right bottom, #5315ff, #e6c0ff);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
  cursor: pointer;
}

.codes {
  .back {
    position: fixed;
    right: 50px;
    bottom: 100px;
    width: 60px;
    height: 60px;
    color: #fff;
    background-image: linear-gradient(to right bottom, #5315ff, #e6c0ff);
    z-index: 9999999;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
</style>
